<template>
    <div class="operateStatic">
        <div class="tip">
            截至{{ nowday }} 年度安全运营天数：
            <span class="count">{{ count }}</span
            >天
        </div>
        <div class="chart-part">
            <div
                ref="chartDom"
                id="operateChart"
                :style="{ width: '100%', height: '100%' }"
            ></div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import dayjs from "dayjs";
import { operateOpts } from "@/cesiumTools/echartsOpts";
import * as echarts from "echarts";
import { useLineData } from "@/store/index";
import { getLine } from "@/api/line.js";
const lineDataStore = useLineData();

const chartDom = ref(null);
const nowday = dayjs(new Date()).format("YYYY/MM/DD");

onMounted(async () => {
    let dataSouce = await getLine();
    initChart(dataSouce);
});

const initChart = (dataSouce) => {
    const myChart = echarts.init(document.getElementById("operateChart"));
    // console.log(lineDataStore);
    const data = dataSouce.map((item) => ({
        name: item.name,
        value: Number(item.length),
    }));
    const options = operateOpts(data);
    console.log(options);
    myChart.setOption(options);
};
const count = ref(2145);
</script>

<style scoped>
.operateStatic {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tip {
    height: 30px;
    width: 100%;
    font-size: 14px;
    color: #fff;
    text-align: center;
    margin-top: 10px;
}

.count {
    font-size: 26px;
    color: #ef9c00;
    letter-spacing: 3px;
}

.chart-part {
    flex: 1;
    display: flex;
    pointer-events: all;
    padding-left: 10px;
}

#operateChart {
    pointer-events: all;
}

.dataList {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.data-item {
    width: 50%;
    color: #fff;
}
</style>
